/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, Dimensions} from 'react-native';
import { Icon } from 'antd-mobile-rn';
import SplashScreen from 'react-native-splash-screen';

// project
import {
    Page, Content, Header, Row, Between, Hand, ItemY, Text, Image, ButtonOpacity, TouchOpacity
} from '../../library';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Article extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor(props) {
        super(props);

        /**
         * state
         */
        this.state = {

        };
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render() {
        var windowWidth = Dimensions.get('window').width;
        return (
            <Page>
                {/* 此页面背景色为白色 */}
                <Content bg='#fff'>
                
                    {/* title star */}
                    <Row mt='48' pa='15'>
                        <Text size='20' color='#454545' style={{fontWeight:'bold'}}>一年大小节不断，一年大小节不断，一年大小节不断，一年大小节不断</Text>
                    </Row>

                    {/* title end */}
                    {/* 发布者信息 star */}
                    <Row mb='20' px='15'>
                        <TouchOpacity active={1}><Text color='#556b9b' mr='5'>和社区</Text></TouchOpacity>
                        <Text color='#bebebe'>5天前</Text>
                    </Row>
                    {/* 发布者信息 end */}

                    {/* 正文内容 star */}
                    <View>
                        <Text style={{paddingLeft:15, paddingRight:15}} lh='22' mb='22' color='#494949'>九月初九“九九”谐音是“久久”，有长久之意，所以常在此日祭祖与推行敬老活动。重阳节与除、清、盂三节也是中国传统节日里祭祖的四大节日。只是近年来，人们对老人的推重，故此节日又被称为老人节。</Text>
                        <Text style={{paddingLeft:15, paddingRight:15}} lh='22' mb='22' color='#494949'>九月初九“九九”谐音是“久久”，有长久之意，所以常在此日祭祖与推行敬老活动。重阳节与除、清、盂三节也是中国传统节日里祭祖的四大节日。只是近年来，人们对老人的推重，故此节日又被称为老人节。</Text>
                        <Text style={{paddingLeft:15, paddingRight:15}} lh='22' mb='22' color='#494949'>九月初九“九九”谐音是“久久”，有长久之意，所以常在此日祭祖与推行敬老活动。重阳节与除、清、盂三节也是中国传统节日里祭祖的四大节日。只是近年来，人们对老人的推重，故此节日又被称为老人节。</Text>
                        <Image source={require('../../assets/u1310.png')} w={windowWidth}></Image>
                    </View>
                    {/* 正文内容 end */}

                    {/* 阅读统计 star */}
                    <Between pa='10 15' pb='20'>
                        <Text color='#b8b8b8' size='13' blod>阅读 194</Text>
                        <Hand>
                            <Image source={require('../../assets/u1312.png')} w='16' h='16' mr='5'></Image>
                            <Text color='#6c799f' size='13' bold>赞</Text>
                        </Hand>
                    </Between>
                    {/* 阅读统计 end */}

                    {/* 广告 star */}
                    <View style={{backgroundColor:'#f2f2f2',paddingLeft:15,paddingRight:15}}>
                        <Between py='10' y='center'>
                            <Hand h='1' f='1' bg='#ebebeb'></Hand>
                            <Hand df x='center' y='center'>
                                <Text color='#878787'>广告</Text>
                                <Icon type='down' size='xxs' color='#cbcbcb'></Icon>
                            </Hand>
                            <Hand h='1' f='1' bg='#ebebeb'></Hand>
                        </Between>
                        <Row bg='#fff' h='105' mb='20'>
                            <Hand bg='#000' x='left' y='center' w='220' h='105' df>
                                <Image source={require('../../assets/advert.jpg')} bg='#f00' f='1'></Image>
                            </Hand>
                            <ItemY f='1' pa='8 10' style={{justifyContent:'space-between',alignItems:'center'}} h='100%'>
                                <Hand w='30' h='30' ra='15' oh>
                                    <Image source={require('../../assets/head_portrait.png')} w='30' h='30' ra='15' style={{backgroundColor:'#efeff4'}}></Image>
                                </Hand>
                                <Text size='12' color='#939393'>精致旧物……</Text>
						        <ButtonOpacity ba='1 #58be5a' color='#58be5a' bg='#fff' py='1' w='50' ra='5' size='13' active='0.7'>关注</ButtonOpacity>
                                {/* <Label ba='1.5 #58be5a' pa='2 10' ra='5'>关注</Label> */}
                            </ItemY>
                        </Row>
                    </View>
                    {/* 广告 end */}
                </Content>

                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff'>
                    <Between px='10'>
                        <Icon type='left' size='md' color='#00CC66' />
                        <Text size='17'>精选推荐</Text>
                        <Text></Text>
                    </Between>
                </Header>
                {/* 顶部 star */}
                
            </Page>
        )
    }
}
